<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>虚拟DOM和真实DOM</title>
</head>
<body>
<div id="test">

</div>
<div id="true">

</div>
</body>
</html>

<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js
// 创建虚拟DOM
const VDOM=<h1>hello react</h1>//此处一定不要写引号，因为不是字符串
const TDOM=document.getElementById('true')
console.log("虚拟DOM",VDOM)
console.log(VDOM instanceof Object)
console.log("真实DOM",TDOM)

ReactDOM.render(VDOM,document.getElementById("test"))

// 1，虚拟DOM本质上是一个对象（一般对象）
// 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM上那么多属性
// 3.虚拟DOM最终会被react转化成真实DOM，呈现在页面上
</script>